<template>
	<view>
		<view class="index-tiku">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
				<block v-for="(item, index) in list" :key="index">
					<view class="index-tiku-content" @tap="openrul(item.id)">
						<view class="index-tiku-content-flex">
							<view class="index-tiku-content-top">
								<view v-if="item.is_read == 0" class="round-dot"></view>
								<view>{{ item.title }}</view>
							</view>
						</view>
						<view class="index-tiku-content-flex">
							<view class="index-tiku-content-bottom">
								<view class="pub-gray">发布时间：{{item.createtime}}</view>
							</view>
						</view>
					</view>
				</block>
			</mescroll-body>
		</view>
		<no-recode :show="is_recode"></no-recode>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import noRecode from '@/components/no-recode.vue'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				type: 0,
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					use: false, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						num: 0,
						size: 20 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				// 列表数据
				list: [],
			};
		},
		onShow() {
			this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
			this.canReset && this.mescroll.scrollTo(0,0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
			this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
		},
		onLoad(opts) {
			this.type = opts.type
		},
		mounted() {},
		computed: {
			...mapState([
				"userInfo"
			]),
		},
		components: {
			noRecode
		},
		methods: {
			openrul(id){
				uni.navigateTo({
					url:'/pages/notice/detail?id=' + id
				})
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条

				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.noticeList,
					data: {
						page: pageNum,
						limit: pageSize
					},
					needLogin: true
				})
				if (res.code == 1) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = res.data.item;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					// let totalPage = data.xxx;
					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
					let totalSize = res.data.total;

					this.mescroll.endBySize(curPageLen, totalSize);
					if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
					for (let i = 0, leng = curPageData.length; i < leng; i++) {
						const item = curPageData[i]
						item.createtime = this.$lib.$utils.timestampToTime(item.createtime) 
					}
					this.list = this.list.concat(curPageData); //追加新数据
					// console.log(this.list)
				} else {
					this.mescroll.endErr()
				}
				// 此处仍可以继续写其他接口请求...
				// 调用其他方法...
			},
			async get_xiaoxi_list() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.messageList
				});
				if (res.code === 1) {
					let rows = res.data.rows;
					for (let i = 0, leng = rows.length; i < leng; i++) {
						rows[i].create_time = this.$myUtils.$common.formatDate(
							rows[i].create_time * 1000,
							"Y年M月D日 h:m:s"
						);
					}
					this.message_list = res.data.rows;
				}
			}
		}
	};
</script>
<style>
	.round-dot {
		width: 8px;
		height: 8px;
		position: relative;
		margin: 4px 8px !important;
		color: #3c7bfc;
		background-color: #3c7bfc;
		border-radius: 4px;
	}

	.index-tiku {
		background: #fff;
	}

	.index-tiku-content {
		width: 92%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		font-size: 16px;
		padding: 13px 0;
		border-bottom: solid 1px #f5f5f5;
	}

	.index-tiku-content-flex {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.index-tiku-content .index-tiku-content-flex:first-child {
		padding-bottom: 6px;
	}

	.index-tiku-content .index-tiku-content-flex:last-child {
		font-size: 14px;
	}

	.index-tiku-content-top {
		display: flex;
		align-items: center;
	}

	.index-tiku-content-top img {
		width: 20px;
		height: 22px;
		margin-right: 10px;
	}

	.index-tiku-content-bottom {
		display: flex;
		align-items: center;
	}
</style>
